
import hello from '../../behaviors/hello'
// components/comp/index.js
Component({
  behaviors:[hello],
  options:{
    // 这个组件支持多个插槽了
    multipleSlots:true,
    // styleIsolation:'apply-shared'
    // styleIsolation:'shared'
  },
  externalClasses:["my-class"],
  /**
   * 组件的属性列表
   * props就是properties的缩写
   */
  properties: {
    name:String,
    // 设置参数默认只
    name2:{
      type:String,
      value:"李白"
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    value:"",
    num1:0,
    num2:0,
    sum:0,
    obj:{
      name:"张三"
    }
  },

  // watch
  observers:{
    'num1,num2':function(num1,num2){
      this.setData({
        sum:Number(num1)+Number(num2)
      })
    },
    "**":function(){
      // 任何的数据变化都会执行
      console.log(
        "data数据变化了"
      );
    },
    "obj.name":function(){
      // 每次name变化的时候都会执行
      console.log("name变化了");
    },
    "obj.**":function(){
      // 监听对象里所有属性的变化
    }
  },

  /**
   * 组件的方法列表
   */
  methods: {
    getProps(){
      console.log(this.data.name);
      console.log(this);
      this.setData({
        "obj.name":"李四"
      })
    },
    submit(){
      // $emit
      this.triggerEvent("finish",this.data.value)
    }
  },
  lifetimes:{
    created(){
      // 和vue的是类似的
      // 数据初始化的地方，
      // 直接初始化this上一些属性字段
      // 不能调用setData
      console.log(this);
      // 一般用于不参与界面渲染的数据
      this.currentPage = 1
      this.pageSize =10
    },
    attached(){
      // 组件初始化完毕，进入页面节点树之后执行的
      // 可以调用setData的
      // 绝大多数数据初始化操作，可以放在这里进行（接口调用）
      console.log("进入界面了");
    },
    ready(){
      // 组件渲染完成之后会执行
      console.log(
        "组件渲染完成"
      );
    },
    moved(){
      // 组件被移动的时候会执行
      // 数组重拍的时候
    },
    detached (){
      // 组件离开页面节点树之后执行的，组件销毁执行
      // 清除计时器或者监听
    }
  },
  // 组件所处的页面的生命周期函数
  pageLifetimes:{
    show(){
      console.log("界面显示了");
    },
    hide(){
      console.log("界面隐藏了");
    },
    resize(size){
      // 屏幕尺寸变化的时候会执行
      // 从竖屏变成横屏的时候
    }
  }
})
